<template>
	<div>
		<p>{{msg}}</p>
		<button @click="clk()">touchme</button>

		<span v-bind:class="classAAA">我是一段文字</span>
		<span :class="[sppA,sppB]">我是第二代文字</span>
		<span v-bind:class="[ebb1,{'ebb2':isShow}]">我是第三度文字</span>
		<span v-bind:style="cdd1">我是第四段文字</span>


		<div>
			<!--子组件提供事件能力-->
			<button @click="emitEvent()">子组件comA提供事件支持</button>
		</div>
	</div>

</template>

<script>
    export default {
        name: "componentA",
        data: function () {
            return {
                msg: 'this is componentA self!!!!',
                classAAA: {
                    'aabb': true
                },
                sppA: 'sppA',
                sppB: 'sppB',
                isShow: true,
                cdd1: {
                    'color': '#0f0cce',
                    'fontSize': '80px',
                },
            }
        },
        methods: {
            clk: function () {
                this.msg = ' change componentA by someone!!!'
                this.classAAA.aabb = !this.classAAA.aabb;
                this.isShow = !this.isShow;
            },

            emitEvent: function () {
                this.$emit('comAtodo', this.msg)
            }
        }
    }
</script>

<style scoped>

	.aabb {
		font-size: 50px;
		font-family: "Al Nile";
		background-color: cadetblue;
		color: rebeccapurple;
	}

	.sppA {
		font-size: 60px;
		color: #090;
	}

	.sppB {
		background-color: burlywood;
	}

	.ebb1 {
		font-size: 44px;
		font-family: "Arial Rounded MT Bold";
		color: #909;
	}

	.ebb2 {
		background-color: chartreuse;
	}
</style>